import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../pages/Home.vue'
import Category from '../pages/category.vue'
import Shopcart from '../pages/Shopcart.vue'
import User from '../pages/User.vue'
import Login from '../pages/user/login.vue'
import Register from '../pages/user/register.vue'
import GoodsList from '../pages/goods/GoodsList.vue'
import GoodsInfo from '../pages/goods/GoodsInfo.vue'
import Address from '../pages/user/Address.vue'
import AddressEdit from '../pages/user/AddressEdit.vue'
import OrderCreate from '../pages/order/OrderCreate.vue'
import OrderList from '../pages/order/OrderList.vue'
import OrderShow from '../pages/order/OrderShow.vue'
import NewsList from '../pages/news/NewsList.vue'
import NewsInfo from '../pages/news/NewsInfo.vue'
import PhotoList from '../pages/photo/PhotoList.vue'
import PhotoInfo from '../pages/photo/PhotoInfo.vue'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/home'
  }, {
    path: '/home',
    component: Home,
    meta: { title: '首页' }
  }, {
    path: '/category',
    component: Category,
    meta: { title: '分类' }
  }, {
    path: '/shopcart',
    component: Shopcart,
    meta: { title: '购物车' }
  }, { //嵌套的话 除非页面 效果是嵌套的  这里是实现跳转
    path: '/user',
    component: User,
    meta: { title: '我的' }
  }, {
    path: '/user/login',
    component: Login,
    meta: { title: '登录' },
    name: 'login'
  }, {
    path: '/user/register',
    component: Register,
    meta: { title: '注册' },
    name: 'register'
  },
  {
    path: '/goodslist/:category_id',
    //具体跳转到哪一个 要使用路由传参  (表示接受传值)
    props: true,  //设置传参为true 
    component: GoodsList,
    meta: { title: '商品列表' },
  },
  {
    path: '/goodsinfo/:id',
    //(表示接受传值)
    props: true,
    component: GoodsInfo,
    name: 'goods_Info',
    meta: { title: '商品信息' },
  }, {
    path: '/user/address',
    component: Address,
    meta: { title: '收货地址列表' },

  }, {
    path: '/user/address/add',
    component: AddressEdit,
    meta: { title: '新增收货地址' },
  }, {
    path: '/user/address/edit/:id',
    component: AddressEdit,
    meta: { title: '编辑收获地址' },
    name: 'address_edit',
    props: true,
  }, {
    path: '/order/create',
    component: OrderCreate,
    name: "order_create",
    meta: { title: '下订单' }
  },
  {
    path: '/order/address/select',
    component: Address,
    name: 'address_select',
    meta: { title: '选择收货地址' }
  },
  {
    path: '/order/list',
    component: OrderList,
    name: "order_list",
    meta: { title: '我的订单' }
  }, {
    path: '/order/show/:id',
    component: OrderShow,
    name: "order_show",
    props: true,
    meta: { title: '查看订单' }
  }, {
    path: '/news/list',
    component: NewsList,
    name: "news_list",
    props: true,
    meta: { title: '新闻资讯列表' }
  }, {
    path: '/news/show/:id',
    component: NewsInfo,
    name: "news_show",
    props: true,
    meta: { title: '新闻资讯列表' }
  },
  {
    path: '/photo/list',
    component: PhotoList,
    name: "photo_list",
    meta: { title: "图片分享列表" }
  },
  {
    path: '/photo/show/:id',
    component: PhotoInfo,
    props: true,
    name: "photo_show",
    meta: { title: "查看图片" }
  }
]

const router = new VueRouter({
  routes,
  linkActiveClass: 'mui-active' // 当连接到激活路由 给当前路由 添加一个类名
})
// 借助路由导航守卫用来 动态设置标题内容  会在页面进行导航切换的时候
router.beforeEach((to, from, next) => {
  // to 要去到的那个路由 from从哪里来 next
  if (to.meta.title) {
    document.title = to.meta.title //把我们要去到的那个路由的 meta原信息中的title
  }
  next() //放行函数 如果 没有next  就会停住
})

export default router
